<template>
  <div v-if="!item.disabled" :class="{'mobile-select':showMobilePage}" class="filter-tool-select-item filter-form-item">
    <el-select
      v-if="item.type === 'select'"
      v-model="value[item.keyword]"
      :placeholder="item.placeholder || item.name"
      :filterable="item.isSearch"
      :remote="!!item.remoteMethod"
      :remote-method="item.remoteMethod"
      :class="[item.className ? item.className : '']"
      :no-data-text="item.emptyText || '无数据'"
      :popper-class="`global-select-down  ${showMobilePage?'panel-mobile':'panel-auto-width'}`"
      clearable
      size="small"
      class="width-small changeStatus mobile filter-tool-width130"
      @change="selectChange">
      <el-option
        v-for="opt in item.options"
        :key="item.valueName ? opt[item.valueName] :opt.value"
        :title="item.labelName ? opt[item.labelName] : opt.label"
        :label="item.labelName ? opt[item.labelName] : opt.label"
        :value="item.valueName ? opt[item.valueName] : opt.value" />
    </el-select>
    <el-select
      v-if="item.type === 'mulSelect'"
      v-model="value[item.keyword]"
      :placeholder="item.placeholder || item.name"
      :filterable="item.isSearch"
      :no-data-text="item.emptyText || '无数据'"
      :popper-class="`global-select-down  ${showMobilePage?'panel-mobile':''}`"
      :class="[item.className ? item.className : '']"
      multiple
      collapse-tags
      clearable
      size="small"
      class="width-small changeStatus mobile filter-tool-width130 custom-mul-select"
      @change="selectChange">
      <el-option
        v-for="opt in item.options"
        :key="item.valueName ? opt[item.valueName] :opt.value"
        :label="item.labelName ? opt[item.labelName] : opt.label"
        :value="item.valueName ? opt[item.valueName] : opt.value" >
        <Ellipsis
          :content="item.labelName ? opt[item.labelName] : opt.label"
          :tooltip="item.labelName ? opt[item.labelName] : opt.label"
          placement="left"
          class="label" />
      </el-option>
    </el-select>
    <el-cascader
      v-if="item.type === 'cascaderSelect'"
      ref="cascaderSelect"
      v-model="value[item.keyword]"
      :show-all-levels="false"
      :options="item.options"
      :multiple="item.multiple"
      :props="{
        emitPath: item.emitPath || false,
        value: item.valueName || 'id',
        label: item.labelName || 'name',
        children: item.childrenVal || 'item',
        checkStrictly: item.checkStrictly === undefined?true :item.checkStrictly,
        multiple: !!item.multiple,
      }"
      :placeholder="item.placeholder || item.name"
      :popper-class="`${item.strictly?`ellips-cascader`:''}`"
      :filterable="item.filterable"
      :class="{'filter-tool-width180':item.keyword === 'tag' || item.filterable}"
      collapse-tags
      class="filter-tool-width130 cascader-select mobile"
      size="small"
      clearable
      @change="cascaderChanage($event,'cascaderSelect')">
      <template slot-scope="{ data }">
        <el-tooltip v-if="data[item.labelName || 'name'].length > 14" placement="top-start" effect="dark">
          <div slot="content" style="max-width: 150px;">{{ data[item.labelName || 'name'] }}</div>
          <span class="inline-tag ellipsisOne">{{ data[item.labelName || 'name'] }}</span>
        </el-tooltip>
        <span v-else>{{ data[item.labelName || 'name'] }}</span>
      </template>
    </el-cascader>
    <load-more-select
      v-if="item.type === 'loadMoreSelect'"
      v-model="value[item.keyword]"
      :value-filed="item.valueName"
      :label-filed="item.labelName"
      :placeholder="item.placeholder"
      :keyword="item.searchkeyword"
      :api-url="item.apiUrl"
      :default-params="item.defaultParams"
      :extend-params="item.extendParams"
      :multiple="item.multiple"
      :empty-text="item.emptyText"
      :is-immediately-query="item.isImmediatelyQuery"
      class="filter-tool-width130 mobile"
      @getSelectedItem="getSelectedItem"
      @loadMoreFilter="loadMoreFilter"
    />
    <CascaderSelect
      v-if="item.type === 'cascaderSelectWithChild'"
      ref="cascaderSelect"
      v-model="value[item.keyword]"
      :value-name="item.valueName || 'id'"
      :label-name="item.labelName || 'name'"
      :options="item.options"
      :placeholder="item.placeholder || item.name"
      :children="item.childrenVal || 'item'"
      :multiple="item.multiple"
      :check-strictly="item.checkStrictly"
      :show-all-levels="item.showAllLevels"
      class="width-small changeStatus filter-tool-width180 custom-mul-select mobile"
      @changeValue="cascaderChanage"
    />
    <ThreeLevelArea
      v-if="item.type === 'addressSelect'"
      :select-type="item.addressType"
      :placeholder="item.placeholder || item.name"
      :selected-options="value[item.keyword]"
      clearable
      separator="-"
      cascader-size="small"
      class="filter-tool-width130 mobile"
      @update:options="threeLevelArea($event, item.keyword)" />
    <el-form-item
      v-if="item.type === 'conditionSelect'"
      :key="item.keyword"
      :label-width="item.labelWidth"
      :class="{'mobile-form-item':showMobilePage}"
      prop="content"
      style="margin-bottom: 0;"
      class="input-form-item condition-select-item">
      <div slot="label" :title="item.name" class="ellipsisTwo input-form-label">{{ item.name }}</div>
      <div class="flex-center width240">
        <el-select v-model="condition" class="condition-select" size="small">
          <el-option
            v-for="opt in conditionOptions"
            :key="item.valueName ? opt[item.valueName] :opt.value"
            :title="item.labelName ? opt[item.labelName] : opt.label"
            :label="item.labelName ? opt[item.labelName] : opt.label"
            :value="item.valueName ? opt[item.valueName] : opt.value" />
        </el-select>
        <el-select
          v-if="item.selectType === 'select'"
          v-model="value[item.keyword]"
          :placeholder="item.placeholder || item.name"
          :filterable="item.isSearch"
          :remote="!!item.remoteMethod"
          :remote-method="item.remoteMethod"
          :class="[item.className ? item.className : '']"
          :no-data-text="item.emptyText || '无数据'"
          :popper-class="`global-select-down  ${showMobilePage?'panel-mobile':'panel-auto-width'}`"
          clearable
          size="small"
          style="flex: 1;"
          class="width-small changeStatus mobile filter-tool-width130"
          @change="selectChange">
          <el-option
            v-for="opt in item.options"
            :key="item.valueName ? opt[item.valueName] :opt.value"
            :title="item.labelName ? opt[item.labelName] : opt.label"
            :label="item.labelName ? opt[item.labelName] : opt.label"
            :value="item.valueName ? opt[item.valueName] : opt.value" />
        </el-select>
        <el-select
          v-if="item.selectType === 'mulSelect'"
          v-model="value[item.keyword]"
          :placeholder="item.placeholder || item.name"
          :filterable="item.isSearch"
          :no-data-text="item.emptyText || '无数据'"
          :popper-class="`global-select-down  ${showMobilePage?'panel-mobile':''}`"
          :class="[item.className ? item.className : '']"
          multiple
          collapse-tags
          clearable
          size="small"
          style="flex: 1;"
          class="width-small changeStatus mobile filter-tool-width130 custom-mul-select"
          @change="selectChange">
          <el-option
            v-for="opt in item.options"
            :key="item.valueName ? opt[item.valueName] :opt.value"
            :label="item.labelName ? opt[item.labelName] : opt.label"
            :value="item.valueName ? opt[item.valueName] : opt.value" >
            <Ellipsis
              :content="item.labelName ? opt[item.labelName] : opt.label"
              :tooltip="item.labelName ? opt[item.labelName] : opt.label"
              placement="left"
              class="label" />
          </el-option>
        </el-select>
        <el-cascader
          v-if="item.selectType === 'cascaderSelect'"
          ref="cascaderSelect"
          v-model="value[item.keyword]"
          :show-all-levels="false"
          :options="item.options"
          :multiple="item.multiple"
          :props="{
            emitPath: item.emitPath || false,
            value: item.valueName || 'id',
            label: item.labelName || 'name',
            children: item.childrenVal || 'item',
            checkStrictly: item.checkStrictly === undefined?true :item.checkStrictly,
            multiple: !!item.multiple,
          }"
          :placeholder="item.placeholder || item.name"
          :popper-class="`${item.strictly?`ellips-cascader`:''}`"
          :filterable="item.filterable"
          collapse-tags
          class="filter-tool-width130 cascader-select mobile"
          size="small"
          clearable
          style="flex: 1;"
          @change="cascaderChanage($event,'cascaderSelect')">
          <template slot-scope="{ data }">
            <el-tooltip v-if="data[item.labelName || 'name'].length > 14" placement="top-start" effect="dark">
              <div slot="content" style="max-width: 150px;">{{ data[item.labelName || 'name'] }}</div>
              <span class="inline-tag ellipsisOne">{{ data[item.labelName || 'name'] }}</span>
            </el-tooltip>
            <span v-else>{{ data[item.labelName || 'name'] }}</span>
          </template>
        </el-cascader>
        <load-more-select
          v-if="item.selectType === 'loadMoreSelect'"
          v-model="value[item.keyword]"
          :value-filed="item.valueName"
          :label-filed="item.labelName"
          :placeholder="item.placeholder"
          :keyword="item.searchkeyword"
          :api-url="item.apiUrl"
          :default-params="item.defaultParams"
          :extend-params="item.extendParams"
          :multiple="item.multiple"
          :empty-text="item.emptyText"
          :is-immediately-query="item.isImmediatelyQuery"
          class="filter-tool-width130 mobile"
          style="flex: 1;"
          @getSelectedItem="getSelectedItem"
          @loadMoreFilter="loadMoreFilter"
        />
        <CascaderSelect
          v-if="item.selectType === 'cascaderSelectWithChild'"
          ref="cascaderSelect"
          v-model="value[item.keyword]"
          :value-name="item.valueName || 'id'"
          :label-name="item.labelName || 'name'"
          :options="item.options"
          :placeholder="item.placeholder || item.name"
          :children="item.childrenVal || 'item'"
          :multiple="item.multiple"
          :check-strictly="item.checkStrictly"
          :show-all-levels="item.showAllLevels"
          style="flex: 1;"
          class="width-small changeStatus custom-mul-select mobile"
          @changeValue="cascaderChanage"
        />
        <ThreeLevelArea
          v-if="item.selectType === 'addressSelect'"
          :select-type="item.addressType"
          :placeholder="item.placeholder || item.name"
          :selected-options="value[item.keyword]"
          clearable
          separator="-"
          cascader-size="small"
          style="flex: 1;"
          class="mobile"
          @update:options="threeLevelArea($event, item.keyword)" />
      </div>
    </el-form-item>
  </div>
  <!-- </el-form-item> -->
</template>

<script>
import LoadMoreSelect from '@/components/LoadMoreSelect';
import CascaderSelect from './module/cascaderSelect';
import ThreeLevelArea from '@/components/ThreeLevelArea';
import { mapState } from 'vuex';
import mixins from './mixins';
export default {
  components: { LoadMoreSelect, CascaderSelect, ThreeLevelArea },
  mixins: [mixins],
  props: {
    item: {
      type: Object,
      default: () => {
        return {};
      }
    },
    value: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    })
  },
  created() {
  },
  methods: {
    selectChange(e) {
      const { item } = this;
      this.$emit('selectChange', { value: e, item });
    },
    getExcludeField() {
      return this.excludeField.join(',');
    },
    getSelectedItem({ selectedItems }, val) {
      let _showValue = '';
      if (Array.isArray(selectedItems)) {
        selectedItems.forEach(i => {
          _showValue += `${_showValue ? ',' : ''}${i[this.item.labelName]}`;
        });
      } else {
        _showValue = selectedItems[this.item.labelName];
      }
      this.$set(this.item, '_showValue', _showValue);
      this.$emit('selectChange', { value: val, item: this.item, selectedItems });
    },
    cascaderChanage(e, keyword = '') {
      if (((e && e.length === 0) || !e) && keyword === 'cascaderSelect') {
        const panel = this.$refs.cascaderSelect.$refs.panel;
        panel.checkedValue = []; // 清空选中值
        panel.clearCheckedNodes(); // 清空级联选择器选中状态
        panel.activePath = []; // 清除高亮
        panel.syncActivePath(); // 初始化（只展示一级节点）
      }
      this.$emit('selectChange', { value: e, item: this.item });
    },
    queryClick() {
      this.$emit('queryClick');
    },
    loadMoreFilter(value) {
      this.$emit('loadMoreFilter', { value, item: this.item });
    },
    threeLevelArea(data, keyword) {
      this.$set(this.value, keyword, data.join('-'));
    }
  }
};
</script>

<style lang="scss" scoped>
@import '@/styles/placeholder.scss';
.filter-tool-select-item {
  margin-right: 16px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  &::v-deep {
    .el-select__tags {
      flex-wrap: nowrap;
      .el-tag > span {
        min-width: 20px !important;
        max-width: 37px !important;
      }
      .el-tag.el-tag--info:last-child {
        padding-left: 1px;
        padding-right: 1px;
        margin-left: 4px;
      }
      .el-tag.el-tag--info .el-tag__close {
        right: -2px !important;
        top: 3px !important;
      }
    }
    .el-input__inner {
      padding-left: 8px;
    }
    .el-select__caret  {
      color: #333 !important;
    }
    .el-cascader .el-input__suffix{
      .el-input__icon {
        color: #333 !important;
      }
    }
  }
  .condition-select-item {
    margin-right: -16px;
  }
}
.mobile-select {
  .mobile {
    width: 162px;
    &::v-deep {
      .el-input {
        width: 162px !important;
        .el-input__inner {
          width: 162px !important;
          &::-webkit-input-placeholder { /* WebKit browsers */
            color: #333333 !important;
            font-size: 14px;
          }
          &::-moz-placeholder { /* Mozilla Firefox 19+ */
            color: #333333 !important;
            font-size: 14px;
          }
          &:-ms-input-placeholder { /* Internet Explorer 10+ */
            color: #333333 !important;
            font-size: 14px;
          }
        }
      }
    }
  }
}
.filter-tool-width130 {
  width: 120px;
  overflow: hidden;
  &::v-deep {
    .el-input {
      width: 120px !important;
      .el-input__inner {
        width: 120px !important;
        &::-webkit-input-placeholder { /* WebKit browsers */
          color: #666 !important;
          font-size: 14px;
        }
        &::-moz-placeholder { /* Mozilla Firefox 19+ */
          color: #666 !important;
          font-size: 14px;
        }
        &:-ms-input-placeholder { /* Internet Explorer 10+ */
          color: #666 !important;
          font-size: 14px;
        }
      }
    }
  }
  ::v-deep .el-cascader__tags {
    flex-wrap: nowrap;
    align-items: center;
    overflow: hidden;
    > input {
      margin-left: 9px;
    }
    > input::-webkit-input-placeholder {
      color: #666;
      font-size: 14px;
    }
    .el-tag > span{
      max-width: 80px;
      color: #406eff;
    }
  }
}
.filter-tool-width140 {
  width: 140px;
  &::v-deep {
    .el-input {
      width: 140px !important;
      .el-input__inner {
        width: 140px !important;
      }
    }
  }
}
.filter-tool-width180 {
  width: 180px;
  &::v-deep {
    .el-input {
      width: 180px !important;
      .el-input__inner {
        width: 180px !important;
      }
    }
  }
}
.custom-mul-select {
  &::v-deep {
    @extend %custom-mul-select !optional;
  }
}
.cascader-select{
  &::v-deep {
    .el-cascader__search-input{
      vertical-align: middle !important;
    }
    .el-input{
      height: 34px;
    }
  }
}
.width240 {
  width: 240px;
}
.condition-select {
  width: 85px;
  margin-right: 4px;
  &::v-deep {
    .el-input__inner {
      padding-right: 30px;
    }
    .el-input {
      width: 85px !important;
    }
  }
}
.input-form-item {
  &::v-deep {
    .dept-select-container {
      width: 100%;
      .el-input {
        width: 100% !important;
      }
    }
  }
}
</style>
